<template>
	<div id="build">

		<el-container>
			<el-row style="background-color: white;">
			  <el-col :span="3">
				<img style="height: 80px;"
					src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bhXRFovJF8LUIwsBOJcmmwHaC9?w=301&h=140&c=7&r=0&o=5&dpr=1.25&pid=1.7"></img></el-col>
			  <el-col id="name" :span="4" style="vertical-align: middle;">
				  <b id="firstname"">太阳花电子商务进销存系统</b>
				<div style="font-size: smaller; text-align: center;">Sunflower e-commerce purchase, sale and storage system</div>
			  </el-col>
			  
			  <el-col :span="11	"><div>&nbsp;</div></el-col>
			  <el-col style="position: relative; top: 55px;" :span="6">
				  <span id="useroper">
				  	<span id="username">您好，${userName}</span>
				  	<i class="el-icon-edit"></i>
				  	<el-link style="font-size: 17px;" type="info" href="#">修改密码</el-link>
				  	<i class="el-icon-view"></i>
				  	<el-link style="font-size: 17px;" type="info" href="#">帮助</el-link>
				  	<i class="el-icon-switch-button"></i>
				  	<el-link style="font-size: 17px;" type="info" href="#">注销</el-link>
				  </span>
			  </el-col>
			</el-row>
			
				

			<el-header style="padding: 0; text-align: center;">
				
				<el-col :span="2" style="background-color: white; height: 61px;"><div>&nbsp;</div></el-col>
				<el-col :span="22">
					
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					
						<el-submenu index="1">
							<template slot="title">我的工作台</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
							<el-menu-item index="1-3">选项3</el-menu-item>
					
							<el-submenu index="1-4">
								<template slot="title">选项4</template>
								<el-menu-item index="1-4-1">选项1</el-menu-item>
								<el-menu-item index="1-4-2">选项2</el-menu-item>
								<el-menu-item index="1-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="2">
							<template slot="title">我的工作台</template>
							<el-menu-item index="2-1">选项1</el-menu-item>
							<el-menu-item index="2-2">选项2</el-menu-item>
							<el-menu-item index="2-3">选项3</el-menu-item>
					
							<el-submenu index="2-4">
								<template slot="title">选项4</template>
								<el-menu-item index="2-4-1">选项1</el-menu-item>
								<el-menu-item index="2-4-2">选项2</el-menu-item>
								<el-menu-item index="2-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="3">
							<template slot="title">我的工作台</template>
							<el-menu-item index="3-1">选项1</el-menu-item>
							<el-menu-item index="3-2">选项2</el-menu-item>
							<el-menu-item index="3-3">选项3</el-menu-item>
					
							<el-submenu index="3-4">
								<template slot="title">选项4</template>
								<el-menu-item index="3-4-1">选项1</el-menu-item>
								<el-menu-item index="3-4-2">选项2</el-menu-item>
								<el-menu-item index="3-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="4">
							<template slot="title">我的工作台</template>
							<el-menu-item index="4-1">选项1</el-menu-item>
							<el-menu-item index="4-2">选项2</el-menu-item>
							<el-menu-item index="4-3">选项3</el-menu-item>
					
							<el-submenu index="4-4">
								<template slot="title">选项4</template>
								<el-menu-item index="4-4-1">选项1</el-menu-item>
								<el-menu-item index="4-4-2">选项2</el-menu-item>
								<el-menu-item index="4-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="5">
							<template slot="title">我的工作台</template>
							<el-menu-item index="5-1">选项1</el-menu-item>
							<el-menu-item index="5-2">选项2</el-menu-item>
							<el-menu-item index="5-3">选项3</el-menu-item>
					
							<el-submenu index="5-4">
								<template slot="title">选项4</template>
								<el-menu-item index="5-4-1">选项1</el-menu-item>
								<el-menu-item index="5-4-2">选项2</el-menu-item>
								<el-menu-item index="5-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="6">
							<template slot="title">我的工作台</template>
							<el-menu-item index="6-1">选项1</el-menu-item>
							<el-menu-item index="6-2">选项2</el-menu-item>
							<el-menu-item index="6-3">选项3</el-menu-item>
					
							<el-submenu index="6-4">
								<template slot="title">选项4</template>
								<el-menu-item index="6-4-1">选项1</el-menu-item>
								<el-menu-item index="6-4-2">选项2</el-menu-item>
								<el-menu-item index="6-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="7">
							<template slot="title">我的工作台</template>
							<el-menu-item index="7-1">选项1</el-menu-item>
							<el-menu-item index="7-2">选项2</el-menu-item>
							<el-menu-item index="7-3">选项3</el-menu-item>
					
							<el-submenu index="7-4">
								<template slot="title">选项4</template>
								<el-menu-item index="7-4-1">选项1</el-menu-item>
								<el-menu-item index="7-4-2">选项2</el-menu-item>
								<el-menu-item index="7-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="8">
							<template slot="title">我的工作台</template>
							<el-menu-item index="8-1">选项1</el-menu-item>
							<el-menu-item index="8-2">选项2</el-menu-item>
							<el-menu-item index="8-3">选项3</el-menu-item>
					
							<el-submenu index="8-4">
								<template slot="title">选项4</template>
								<el-menu-item index="8-4-1">选项1</el-menu-item>
								<el-menu-item index="8-4-2">选项2</el-menu-item>
								<el-menu-item index="8-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="9">
							<template slot="title">我的工作台</template>
							<el-menu-item index="9-1">选项1</el-menu-item>
							<el-menu-item index="9-2">选项2</el-menu-item>
							<el-menu-item index="9-3">选项3</el-menu-item>
					
							<el-submenu index="9-4">
								<template slot="title">选项4</template>
								<el-menu-item index="9-4-1">选项1</el-menu-item>
								<el-menu-item index="9-4-2">选项2</el-menu-item>
								<el-menu-item index="9-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					
						<el-submenu index="10">
							<template slot="title">我的工作台</template>
							<el-menu-item index="10-1">选项1</el-menu-item>
							<el-menu-item index="10-2">选项2</el-menu-item>
							<el-menu-item index="10-3">选项3</el-menu-item>
					
							<el-submenu index="10-4">
								<template slot="title">选项4</template>
								<el-menu-item index="10-4-1">选项1</el-menu-item>
								<el-menu-item index="10-4-2">选项2</el-menu-item>
								<el-menu-item index="10-4-3">选项3</el-menu-item>
							</el-submenu>
					
						</el-submenu>
					</el-menu>
					
				</el-col>
				
				
				
			</el-header>
			<el-main>Main
				<router-view></router-view>
			</el-main>
			<el-footer>Footer</el-footer>
		</el-container>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1'
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.el-submenu {
	}

	.el-menu-demo {
		background-color: palegoldenrod;
		position: fixed;
		right: 0px;
	}

	* {
		border: 0px;
		margin: 0px;

	}
	
	.el-link.el-link--info {
		margin: 0px 5px;
	}

	.el-icon-switch-button:before,
	.el-icon-view:before {
		position: relative;
		top: 2px;
	}
	
	#username {
		position: relative;
		right: 15px;
	}
	
	#firstname {
		position: relative;
		left: 30px;
	}
	
	#name {
		position: relative;
		top: 20px;
		right: 30px;
	}
	
	#build{
	background:url("../assets/image/bgc.png");
	width:100%;			
	height:100%;			
	position:fixed;
	background-size:100% 	80%;
	background-position:bottom;
	}
</style>
